<template lang="pug">
    div.oppointment(@click="info")
        div.main
            h1 {{order.tname}} {{order.time}}分钟
            div {{order|timeFilter}}
            div 美容师：{{order.staffname}}
        a(v-if="order.oid || order.state==0",@click.stop="cancel") 取消
</template>
<script>
import moment from "moment";
export default {
  props: ["order"],
  methods: {
    cancel() {
      this.$api.v1
        .order_cancelOrder_post({
          data: { oid: this.order.oid ? this.order.oid : this.order.id }
        })
        .then(resp => {
          if (resp.status === 200) {
            if (resp.data.result) {
              this.$emit("cancel");
            } else {
              alert(resp.data.message);
            }
          } else {
            alert("网络错误");
          }
        });
    },
    info() {
      this.$router.push({
        path: "/appointment/info",
        query: { oid: this.order.oid ? this.order.oid : this.order.id }
      });
    }
  },
  filters: {
    timeFilter(order) {
      return (
        moment(order.starttime, "X").format("YYYY-MM-DD HH:mm") +
        " - " +
        moment(order.endtime, "X").format("HH:mm")
      );
    }
  }
};
</script>

<style lang="stylus" scoped>
.oppointment {
  display: flex;
  padding: 0.1rem 0.3rem;
  font-size: 0.3rem;
  background-color: #fff;
  justify-content: space-between;
  align-items: center;

  .main {
    line-height: 0.5rem;

    h1 {
      line-height: 0.7rem;
      word-spacing: 0.5rem;
    }

    display: flex;
    flex-direction: column;

    span {
      font-size: 0.18rem;
    }
  }

  a {
    color: #ac0e0e;
  }
}
</style>

